<template>
    <div class='footer'>        
        <ul>
            <router-link :key='index' 
                v-for='(item,index) in list' 
                @click.native='getIndex(index)'
                :to='item.path'
                >
                <li :class="isgaoliang==index?'select':''">
                    <i class='iconfont' :class='item.iconfont'></i>
                    <p>{{ item.msg }}</p>
                </li>
            </router-link> 
            
        </ul>
    </div>
</template>

<script>
// import { router-link } from 'vue-router';
import { mapState,mapMutations } from 'vuex'
export default {
//   name:'Footer',
  data(){
      return {
        //   count:1
        list:[
            {
                path:'/',
                iconfont:'icon-changyonglogo40',
                msg:'外卖'
            },
            {
                path:'/find',
                iconfont:'icon-faxian',
                msg:'发现'
            },
            {
                path:'/indent',
                iconfont:'icon-dingdan1',
                msg:'订单'
            },
            {
                path:'/myself',
                iconfont:'icon-wode',
                msg:'我的'
            }
        ]
      }
  },
  methods:{
      ...mapMutations({
          getIndex:'GETINDEX'
      })
  },
  computed:{

    ...mapState(['isgaoliang'])
  }
}
</script>

<style lang="scss" scoped>
    @import '../../static/hotcss/px2rem.scss';
    .footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        height:px2rem(99);
        border-top: px2rem(1) solid #CCC;
        box-sizing: border-box;
        padding-top: px2rem(10);
        // display: flex;
        ul{
            height:px2rem(90);
            display: flex;
            a{
                flex: 1;
                 li{
                    display: flex;
                    // justify-content: 
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    color: #666;
                    i{
                        font-size: px2rem(40)
                    }
                    p{
                        font-size: px2rem(20);
                        line-height: px2rem(24);
                    }
                }
                .select{
                    color:#0089dc;
                }
            }
           
        }

    }
</style>



